不會程式也能用 VurPress 玩 JAMStack 架設網站（1）

我在研究 JAMstack 的過程中，一直在想是否能夠整理出一個流程，讓即使是完全不懂技術的使用者也能簡單的架設出一個網站，同時還能保有一定程度的客製化。

於是這篇文章就產生了，這邊我用來示範操作的模板依然是之前已經介紹過的 z3by/vuepress-blog-template

先來到 Template 的 Repository

來到 Template 的 Repo 後，點擊右上角的 Fork 按鈕，可以將 Repo 整份複製你自己的帳號下方，透過 Fork 我們才能取得 Repo 的控制權。

Forking~~~~

Fork 完成後，可以看到 Repo 前面是我們的帳號，只是下方會顯示來源

建立 CI/CD 腳本

進入儲存庫之後，第一件事情就先來透過滑鼠點擊資料夾的方式，進入 vuepress-blog-template/.github/workflows/ 目錄來設置自動化部屬的腳本

進入目錄後點擊 Add file > Create new file 來新增檔案

接著如上圖步驟，依序輸入檔案名稱、檔案內容後進行儲存，檔案內容其實就是前面章節有提到過的 GitHub Actions 腳本：

name: Deploy gh-pages

on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build and deploy gh-pages
    env:
      MY_SECRET   : ${{secrets.commit_secret}}
      PUBLISH_DIR : .vuepress/dist
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - uses: borales/actions-yarn@v2.0.0
      with:
        cmd: install # will run `yarn install` command
    - uses: borales/actions-yarn@v2.0.0
      with:
        cmd: build # will run `yarn build` command
    - name: Commit files
      run: |
        echo ${{secrets.DEPLOY_PASSWORD}} | sudo -S chown -R $USER:$USER $PUBLISH_DIR
        cd $PUBLISH_DIR
        git init
        git config --local user.email "action@github.com"
        git config --local user.name "GitHub Action"
        git status
        git remote add origin https://$MY_SECRET@github.com/$GITHUB_REPOSITORY.git
        git checkout -b gh-pages
        git add --all
        git commit -m "deploy to Github pages"
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        branch: 'gh-pages'
        force: true
        directory: '.vuepress/dist'

開始運行 GitHub Actions 部署腳本

在儲存之後，其實 GitHub Actions 就會自動開始運行了，我們可以在 Actions 的頁籤中看到目前正在運行中與已經失敗的腳本

圖示中第一個的 Actions 顯示已經失敗，但這個可以暫時先無視，這是因為 z3by/vuepress-blog-template 專案中有設置 Markdown 語法檢查機制，但是預設的內容卻不符合檢查規則，這個錯誤並不影響網站的部署，所以這邊暫時不作處理。

不過其實，我們剛剛才加入的 Deploy 腳本也會發生錯誤喔：

這個原因其實是模板中 config.js 的某參數設置不當造成的，我們下一篇再來解決這個問題囉。